<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>新增证书</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/newCourse.css"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <script src="../js/axios.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
    <style>
        .app {
            float: left;
        }
    </style>

</head>

<body>

<!--		<p>这里是添加页面页面</p>-->
<!-- 一级容器，与其他框架（iframe , div）同级，装填以下div -->
<div id="app" class="container-fluid app">

    证书名字：
    <el-input
            type="text"
            placeholder="请输入名字"
            v-model="name"
            maxlength="15"
            show-word-limit
            style="width: 300px"></el-input>

    <div style="margin: 70px 0;"></div>

    证书描述：
    <el-input
            type="textarea"
            placeholder="请输入证书描述"
            v-model="description"
            maxlength="50"
            show-word-limit
            style="width: 300px"
            rows="3"
    >
    </el-input>
    <div style="margin: 60px 0;"></div>
    <div style="margin-left: 100px">
        <el-button type="primary" @click="add()">添加<i class="el-icon-upload el-icon--right"></i></el-button>
        <el-button type="danger" @click="clear()">清空<i class="el-icon-delete el-icon--right"></i></el-button>

    </div>

</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                name: "",
                description: "",
                storage: undefined,
                token: "",
                refreshToken: ""
            }
        },
        created() {
            this.getToken();
        },
        methods: {
            getToken: function () {
                this.storage = window.localStorage;
                this.token = this.storage.getItem("token");
                this.refreshToken = this.storage.getItem("refreshToken");
            },
            add: function () {
                this.$confirm('确定新增此证书?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = {
                        "name": this.name,
                        "description": this.description
                    };
                    axios.post("/learnmap/addCertificate", data, {
                        headers: {
                            'Content-Type': 'application/json;charset=UTF-8',
                            "token": this.token,
                            "refreshToken": this.refreshToken
                        }
                    }).then(res => {
                        if (res.data.code == 200) {
                            this.clear();
                            this.$message({

                                type: 'success',
                                message: '新增证书成功!'
                            });
                        } else if (res.data.code == 346) {
                            this.$message({
                                type: 'warning',
                                message: '该证书名字已被使用，请更换'
                            });

                        } else if (res.data.code == 330) {
                            this.$message({
                                type: 'error',
                                message: '系统维护中，请稍后再试'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消新增'
                    });
                })

            },
            clear: function () {
                this.name = "",
                    this.description = ""
            }
        }
    })
</script>
</body>
</html>